<script setup>
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
import { Head, Link, useForm } from '@inertiajs/vue3';

const props = defineProps({
    user: Object,
    followers: Object,
});

const getUserAvatar = (user) => {
    if (user?.avatar) {
        return user.avatar.startsWith('http') ? user.avatar : `/storage/${user.avatar}`;
    }
    return `https://api.dicebear.com/7.x/avataaars/svg?seed=${user?.name || 'user'}`;
};

const formatNumber = (num) => {
    if (num >= 10000) {
        return (num / 10000).toFixed(1) + '万';
    }
    return num.toString();
};

const followForm = useForm({});

const handleFollow = (targetUser) => {
    followForm.post(route('users.follow', targetUser.username), {
        preserveScroll: true,
        onSuccess: () => {
            // 刷新页面以更新关注状态
            window.location.reload();
        },
    });
};
</script>

<template>
    <Head :title="`${user.nickname || user.name} 的粉丝`" />

    <AuthenticatedLayout>
        <div class="space-y-6">
            <!-- 标题 -->
            <div class="bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm">
                <div class="px-6">
                    <div class="flex items-center gap-4">
                        <Link
                            :href="route('users.show', user.username)"
                            class="hover:opacity-80 transition-opacity"
                        >
                            <img
                                :src="getUserAvatar(user)"
                                :alt="user.nickname || user.name"
                                class="w-16 h-16 rounded-full"
                            />
                        </Link>
                        <div>
                            <h1 class="text-2xl font-bold">
                                {{ user.nickname || user.name }} 的粉丝
                            </h1>
                            <p class="text-muted-foreground text-sm">
                                共 {{ formatNumber(followers.total || 0) }} 人
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 粉丝列表 -->
            <div class="bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm">
                <div class="px-6">
                    <div v-if="followers.data && followers.data.length > 0" class="space-y-4">
                        <div
                            v-for="follower in followers.data"
                            :key="follower.id"
                            class="flex items-center justify-between p-4 border rounded-lg hover:bg-muted/50 transition-colors"
                        >
                            <div class="flex items-center gap-4">
                                <Link
                                    :href="route('users.show', follower.username || follower.id)"
                                    class="hover:opacity-80 transition-opacity"
                                >
                                    <img
                                        :src="getUserAvatar(follower)"
                                        :alt="follower.nickname || follower.name"
                                        class="w-12 h-12 rounded-full"
                                    />
                                </Link>
                                <div>
                                    <Link
                                        :href="route('users.show', follower.username || follower.id)"
                                        class="font-semibold hover:underline block"
                                    >
                                        {{ follower.nickname || follower.name }}
                                    </Link>
                                    <p v-if="follower.signature" class="text-sm text-muted-foreground mt-1">
                                        {{ follower.signature }}
                                    </p>
                                    <div class="flex gap-4 mt-2 text-xs text-muted-foreground">
                                        <span>粉丝: {{ formatNumber(follower.followers_count || 0) }}</span>
                                        <span>关注: {{ formatNumber(follower.following_count || 0) }}</span>
                                        <span>帖子: {{ formatNumber(follower.posts_count || 0) }}</span>
                                    </div>
                                </div>
                            </div>
                            <div v-if="$page.props.auth?.user && $page.props.auth.user.id !== follower.id">
                                <form @submit.prevent="handleFollow(follower)" class="inline-block">
                                    <button
                                        type="submit"
                                        :disabled="followForm.processing"
                                        class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all bg-primary text-primary-foreground shadow-sm hover:bg-primary/90 h-9 px-4 py-2"
                                        :class="follower.is_following ? 'bg-secondary text-secondary-foreground hover:bg-secondary/80' : ''"
                                    >
                                        {{ follower.is_following ? '已关注' : '关注' }}
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>

                    <!-- 空状态 -->
                    <div v-else class="text-center py-12 text-muted-foreground">
                        <p>暂无粉丝</p>
                    </div>

                    <!-- 分页 -->
                    <div v-if="followers.links && followers.links.length > 3" class="flex items-center justify-center gap-2 pt-6">
                        <Link
                            v-for="(link, index) in followers.links"
                            :key="index"
                            :href="link.url || '#'"
                            v-html="link.label"
                            :class="[
                                'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all h-9 px-3 py-2',
                                link.active ? 'bg-primary text-primary-foreground shadow-sm' : 'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
                                !link.url ? 'text-muted-foreground cursor-not-allowed opacity-50' : ''
                            ]"
                        />
                    </div>
                </div>
            </div>
        </div>
    </AuthenticatedLayout>
</template>

